<template>
	<view>
		<!-- 地址 -->
		<navigator url="/pages/address/address?source=1" class="address-section">
			<view class="order-content">
				<view class="yticon icon-shouhuodizhi">
					<up-icon name="map" size="45rpx" color="#18C2FF"></up-icon>
				</view>
				<view class="cen">
					<view class="top">
						<text class="name">{{addressData.receiver_province}} {{addressData.receiver_city}}
							{{addressData.receiver_district}} {{addressData.receiver_address}}</text>
					</view>
					<text class="address"> {{addressData.receiver_name}} {{addressData.receiver_mobile}}</text>
				</view>
				<view class="yticon icon-you">
					<up-icon name="arrow-right"></up-icon>
				</view>
			</view>

		</navigator>

		<view class="goods-section">

			<!-- 商品列表 -->
			<block v-for="(item,index) in order_shop_list" :key="index">
				<view class="g-item">
					<image
						src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=756705744,3505936868&fm=11&gp=0.jpg">
					</image>
					<view class="right">
						<view class="title clamp" style="margin-top: 18rpx;">{{item.goods.goods_name}}</view>
						<view class="price-box">
							<text class="number" style="margin-left: 0;">x {{item.num}}</text>
							<text class="number">{{item.sku.attr}}</text>
						</view>
						<view class="price">
							￥{{item.sku.price}}
						</view>
					</view>
				</view>
			</block>
			<view class="yt-list-cell b-b" style="line-height: 0;">
				<text class="cell-tit clamp"></text>
				<text class="cell-tip" style="font-size: 22rpx;color: #868789;">共 {{order_shop_list.length}} 种</text>
			</view>
			<up-divider></up-divider>
			<view class="yt-list-cell b-b">
				<text class="cell-tit clamp">运费</text>
				<text class="cell-tip">免运费</text>
			</view>
			<view class="yt-list-cell b-b">
				<text class="cell-tit clamp"></text>
				<text class="cell-tip">小计：￥{{totalMoney}}</text>
			</view>
		</view>
		<!-- 金额明细 -->
		<view class="yt-list">
			<view class="yt-list-cell desc-cell" style="justify-content: space-between;">
				<text class="cell-tit clamp">备注</text>
				<view style="display: flex;align-items: center;">
					<input class="cell-tip" type="text" v-model="remark" placeholder="推荐使用无接触配送"
						placeholder-class="placeholder" />&nbsp;
					<up-icon name="arrow-right"></up-icon>
				</view>

			</view>
			<!-- <view class="yt-list-cell desc-cell" style="justify-content: space-between;">
				<text class="cell-tit clamp">如遇缺货</text>
				<view style="display: flex;align-items: center;">
					<input class="cell-tip" type="text" v-model="desc" placeholder="缺货时电话与我沟通"
						placeholder-class="placeholder" />&nbsp;
					<up-icon name="arrow-right"></up-icon>
				</view>

			</view> -->
		</view>

		<!-- 金额明细 -->
		<view class="yt-list" style="box-sizing: border-box;">
			<view class="title" style="padding:24rpx;">选择支付方式</view>
			<up-radio-group v-model="radiovalue1" @change="groupChange">
				<up-cell-group :border="false">
					<up-cell title="微信">
						<template #icon>
							<img src="@/static/wx.png" alt="" style="width:48rpx;height:48rpx;" />
						</template>
						<template #value>
							<up-radio shape="circle" activeColor="#E94816" name="wx"></up-radio>
						</template>
					</up-cell>
					<!-- 					<up-cell :border="false" >
						<template #title>余额 <text style="color: #999999;">(￥2000)</text></template>
						<template #icon>
							<img src="@/static/bal.png" alt="" style="width:48rpx;height:48rpx;"/>
						</template>
						<template #value>
							<up-radio shape="circle" activeColor="#E94816" name="balance"></up-radio>
						</template>
					</up-cell> -->
				</up-cell-group>
			</up-radio-group>
		</view>
		<!-- 底部 -->
		<view class="footer">
			<view class="cart">
				<view class="cart-button">


					<view class="cart-icon" @click="showCar">
						<image class="img" :class="{active}" mode="widthFix" src="@/static/Vector.png">
						</image>
						<view class="badge">
							<up-badge bgColor="#F03717" max="99" :value="num"></up-badge>
						</view>
					</view>

				</view>
				<view class="cart-prices">
					<view class="price">
						<view class="payableAmount">
							¥<text class="text">{{totalMoney || 0}}</text>
						</view>
						<view class="totalAmount">
							<text class="text">预估配送费￥300</text>
						</view>
					</view>
				</view>
				<view class="cart-preview" @click="submit">提交订单</view>
			</view>
			<view style="width: 100%;height: 46rpx;background-color: #fff;"></view>
		</view>
		<view style="width: 100%;height: 46rpx;"></view>

	</view>
	<sufficient ref="noySufficient"></sufficient>
</template>

<script>
	import {
		http
	} from 'uview-plus'
	import sufficient from '@/componets/not-sufficient-pop/not-sufficient-pop.vue'
	export default {
		components: {
			sufficient
		},
		data() {
			return {
				remark: '', //备注
				addressData: {},
				order_shop_list: [],
				radiovalue1: 'wx',
				totalMoney: "0"
			}
		},
		async onLoad(option) {
			//商品数据
			this.order_shop_list = uni.getStorageSync('orderInfo')
			this.addressData = await http.get('/shop/user/address/default', {
				header: {
					'Content-Type': 'multipart/form-data'
				}
			});
			this.statistics()
		},
		methods: {
			erChange(data) {
				this.number = data.number;
			},
			statistics() {
				let total = 0
				this.order_shop_list.find((item, index) => {
					if (item.checked == 2) {
						total = total + item.sku.price * item.num
					}
				})
				this.totalMoney = total.toFixed(2)
			},
			async submit() {
				var that = this
				// if(that.radiovalue1 == 'balance'){
				// 	that.$refs.noySufficient.setup(that.totalMoney)
				// 	return
				// }
				let buy_info = []
				this.order_shop_list.find((item, index) => {
					buy_info.push({
						"goods_name": item.goods.goods_name,
						"goods_id": '1',
						"goods_sku_id": '14',
						"num": item.num
					})
				})
				await http.post('/shop/order/save', {
					buy_info: buy_info,
					receiver_name: this.addressData.receiver_name,
					receiver_mobile: this.addressData.receiver_mobile,
					receiver_address: `${this.addressData.receiver_province} ${this.addressData.receiver_city} ${this.addressData.receiver_district} ${this.addressData.receiver_address}`,
					remark: this.remark
				}).then(res => {
					uni.requestPayment({
						"provider": "wxpay", //固定值为"wxpay"
						"orderInfo": res,
						success: function(res) {
							var rawdata = JSON.parse(res.rawdata);
							console.log("支付成功");
							uni.showToast({
								title:'支付成功',
								icon:'success'
							})
							uni.navigateTo({
								url:'/pages/my_order/my_order?index=2'
							})
						},
						fail: function(err) {
							console.log('支付失败:' + JSON.stringify(err));
						}
					});
				});
				// uni.navigateTo({
				// 	url: '/pages/order/order_detail'
				// })
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F1F2F6;
		padding-bottom: 100rpx;
	}

	.u-divider {
		margin-bottom: 0 !important;
	}

	.address-section {
		display: block;
		width: 718rpx;
		max-height: 184rpx;
		border-radius: 20rpx;
		padding: 30rpx 0;
		background: #fff;
		position: relative;
		margin: 0 auto;

		.order-content {
			display: flex;
			background: #fff;
			margin: 0 auto;
		}

		.icon-shouhuodizhi {
			flex-shrink: 0;
			display: flex;
			align-items: flex-start;
			justify-content: center;
			width: 90rpx;
			color: #888;
			font-size: 44rpx;
		}

		.cen {
			display: flex;
			flex-direction: column;
			flex: 1;
			font-size: 28rpx;
			color: #333;
		}

		.name {
			font-size: 30rpx;
			margin-right: 24rpx;
		}

		.address {
			font-size: 24rpx;
			margin-top: 16rpx;
			margin-right: 20rpx;
			color: #999999;
		}

		.icon-you {
			font-size: 32rpx;
			color: #333;
			margin-right: 30rpx;
			display: flex;
			align-items: center;
		}

		.a-bg {
			position: absolute;
			left: 0;
			bottom: 0;
			display: block;
			width: 100%;
			height: 5rpx;
		}
	}

	.goods-section {
		margin-top: 16rpx;
		background: #fff;
		padding-bottom: 1px;
		width: 718rpx;
		border-radius: 20rpx;
		margin: 0 auto;
		opacity: 1;

		background: #FFFFFF;

		.g-header {
			display: flex;
			align-items: center;
			height: 84rpx;
			padding: 0 30rpx;
			position: relative;
		}

		.logo {
			display: block;
			width: 50rpx;
			height: 50rpx;
			border-radius: 100px;
		}

		.name {
			font-size: 30rpx;
			color: #333;
			margin-left: 24rpx;
		}

		.g-item {
			display: flex;
			margin: 20rpx 30rpx;

			image {
				flex-shrink: 0;
				display: block;
				width: 140rpx;
				height: 140rpx;
				border-radius: 4rpx;
			}

			.right {
				flex: 1;
				padding-left: 24rpx;
				overflow: hidden;
				position: relative;

				.title {
					width: 400rpx;
				}

				.price {
					position: absolute;
					top: 18rpx;
					right: 0rpx;
					font-family: Source Han Sans;
					font-size: 28rpx;
					font-weight: 500;
					color: #272727;
				}
			}

			.title {
				font-size: 30rpx;
				color: #272727;
				font-weight: 500;
			}

			.spec {
				font-size: 26rpx;
				color: #333;
			}

			.price-box {
				display: flex;
				align-items: center;
				font-size: 32rpx;
				color: #333;
				padding-top: 10rpx;

				.price {
					margin-bottom: 4rpx;
				}

				.number {
					font-size: 26rpx;
					color: #333;
					margin-left: 20rpx;
				}
			}

			.step-box {
				position: relative;
			}
		}
	}

	.yt-list {
		margin: 0 auto;
		margin-top: 16rpx;
		background: #fff;
		padding-bottom: 1px;
		width: 718rpx;
		border-radius: 20rpx;
	}

	.yt-list-cell {
		display: flex;
		align-items: center;
		padding: 10rpx 30rpx 10rpx 40rpx;
		line-height: 70rpx;
		position: relative;

		&.cell-hover {
			background: #fafafa;
		}

		&.b-b:after {
			left: 30rpx;
		}

		.cell-icon {
			height: 32rpx;
			width: 32rpx;
			font-size: 22rpx;
			color: #fff;
			text-align: center;
			line-height: 32rpx;
			background: #f85e52;
			border-radius: 4rpx;
			margin-right: 12rpx;

			&.hb {
				background: #ffaa0e;
			}

			&.lpk {
				background: #3ab54a;
			}

		}

		.cell-more {
			align-self: center;
			font-size: 24rpx;
			color: #eee;
			margin-left: 8rpx;
			margin-right: -10rpx;
		}

		.cell-tit {
			flex: 1;
			font-size: 26rpx;
			color: #333;
			margin-right: 10rpx;
		}

		.cell-tip {
			font-size: 26rpx;
			text-align: right;

			&.disabled {
				color: #333;
			}

			&.active {
				color: '#';
			}

			&.red {
				color: red;
			}
		}

		&.desc-cell {
			.cell-tit {
				max-width: 136rpx;
			}
		}

		.desc {
			flex: 1;
			font-size: 24rpx;
			color: #333;
		}
	}

	/* 支付列表 */
	.pay-list {
		padding-left: 40rpx;
		margin-top: 16rpx;
		background: #fff;

		.pay-item {
			display: flex;
			align-items: center;
			padding-right: 20rpx;
			line-height: 1;
			height: 110rpx;
			position: relative;
		}

		.icon-weixinzhifu {
			width: 80rpx;
			font-size: 40rpx;
			color: #6BCC03;
		}

		.icon-alipay {
			width: 80rpx;
			font-size: 40rpx;
			color: #06B4FD;
		}

		.icon-xuanzhong2 {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 60rpx;
			height: 60rpx;
			font-size: 40rpx;
			color: #06B4FD;
		}

		.tit {
			font-size: 32rpx;
			color: #333;
			flex: 1;
		}
	}

	.footer {
		position: fixed;
		left: 0;
		bottom: 46rpx;
		z-index: 995;
		width: 100%;
		height: 90rpx;
		justify-content: space-between;
		font-size: 30rpx;
		background-color: #fff;
		z-index: 998;
		color: #333;
		box-shadow: 0 -1px 5px rgba(0, 0, 0, .1);

		.cart {
			z-index: 99999;
			background: $uni-bg-color;
			display: flex;
			align-items: center;
			color: #858687;
			// flex: 1;
			flex-direction: row;
			width: 100%;
			height: 106rpx;
			padding: 0 20rpx;
			box-sizing: border-box;

			&-icon {
				position: relative;
				margin-right: 20rpx;

				.img {
					width: 66rpx;
					transition: transform 0.3s ease;
					margin-top: 12rpx;

					&.active {
						transform: scale(1.5);
					}
				}

				.badge {
					position: absolute;
					right: -10rpx;
					top: -10rpx
				}
			}

			&-prices {
				flex: 1;
				font-size: 28rpx;
				flex-direction: row;

				.price {
					display: flex;
					flex-direction: column;
				}

				.text {
					color: #3D3D3D;
					font-size: 26rpx;
				}

				.payableAmount {
					// color: #fff;
					flex-direction: row;
					font-size: 26rpx;
					color: #E94816;
					font-weight: 500;

					.text {
						color: #E94816;
						font-size: 48rpx;
					}
				}

				.number {
					font-size: 40rpx;
				}
			}

			&-preview {
				width: 200rpx;
				height: 76.9rpx;
				border-radius: 67.42rpx;
				position: relative;
				display: flex;
				justify-content: center;
				background: #0B9EE2;
				line-height: 76.9rpx;
				font-size: 26.38rpx;
				color: #ffffff;
			}
		}

		.cart2 {
			bottom: 50rpx;
			justify-content: flex-end;
		}
	}

	/* 优惠券面板 */
	.mask {
		display: flex;
		align-items: flex-end;
		position: fixed;
		left: 0;
		top: var(--window-top);
		bottom: 0;
		width: 100%;
		background: rgba(0, 0, 0, 0);
		z-index: 9995;
		transition: .3s;

		.mask-content {
			width: 100%;
			min-height: 30vh;
			max-height: 70vh;
			background: #f3f3f3;
			transform: translateY(100%);
			transition: .3s;
			overflow-y: scroll;
		}

		&.none {
			display: none;
		}

		&.show {
			background: rgba(0, 0, 0, .4);

			.mask-content {
				transform: translateY(0);
			}
		}
	}

	/* 优惠券列表 */
	.coupon-item {
		display: flex;
		flex-direction: column;
		margin: 20rpx 24rpx;
		background: #fff;

		.con {
			display: flex;
			align-items: center;
			position: relative;
			height: 120rpx;
			padding: 0 30rpx;

			&:after {
				position: absolute;
				left: 0;
				bottom: 0;
				content: '';
				width: 100%;
				height: 0;
				border-bottom: 1px dashed #f3f3f3;
				transform: scaleY(50%);
			}
		}

		.left {
			display: flex;
			flex-direction: column;
			justify-content: center;
			flex: 1;
			overflow: hidden;
			height: 100rpx;
		}

		.title {
			font-size: 32rpx;
			color: #333;
			margin-bottom: 10rpx;
		}

		.time {
			font-size: 24rpx;
			color: #eee;
		}

		.right {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 26rpx;
			color: #f3f3f3;
			height: 100rpx;
		}

		.price {
			font-size: 44rpx;
			color: #06B4FD;

			&:before {
				content: '￥';
				font-size: 34rpx;
			}
		}

		.tips {
			font-size: 24rpx;
			color: #eee;
			line-height: 60rpx;
			padding-left: 30rpx;
		}

		.circle {
			position: absolute;
			left: -6rpx;
			bottom: -10rpx;
			z-index: 10;
			width: 20rpx;
			height: 20rpx;
			background: #f3f3f3;
			border-radius: 100px;

			&.r {
				left: auto;
				right: -6rpx;
			}
		}
	}
</style>